<template>
  <div class="home-container">
    <!-- Banner 轮播图 -->
    <el-carousel :height="bannerHeight" arrow="always" indicator-position="none">
      <el-carousel-item v-for="banner in banners" :key="banner.id">
        <el-image :src="banner.image" fit="cover" class="banner-image" />
      </el-carousel-item>
    </el-carousel>

    <!-- 精选客照 -->
    <div class="section">
      <h2 class="section-title">精选客照</h2>
      <div class="samples-grid">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="sample in samples" :key="sample.id">
            <div class="sample-item" @click="handlePreviewSample(sample)">
              <div class="image-wrapper">
                <img :src="sample.photos?.[0]" :alt="sample.title" />
                <div class="overlay">
                  <h3>{{ sample.title }}</h3>
                  <p>{{ sample.description }}</p>
                  <div class="meta">
                    <span>摄影师：{{ sample.photographer.nickname }}</span>
                    <span>
                      <el-icon><Star /></el-icon>
                      {{ sample.likes }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 推荐摄影师 -->
    <div class="section photographers">
      <h2 class="section-title">推荐摄影师</h2>
      <el-row :gutter="20">
        <el-col :span="6" v-for="photographer in photographers" :key="photographer.id">
          <el-card @click="handleViewPortfolio(photographer)">
            <img :src="photographer.avatar" class="photographer-avatar" />
            <div class="photographer-info">
              <h3>{{ photographer.nickname }}</h3>
              <!-- <p>{{ photographer.description }}</p> -->
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 拍摄步骤 -->
    <div class="section shooting-steps">
      <h2 class="section-title">拍摄步骤</h2>
      <el-steps :active="1" finish-status="success" align-center>
        <el-step title="预约咨询" description="选择套餐与摄影师"></el-step>
        <el-step title="确认订单" description="支付定金"></el-step>
        <el-step title="拍摄当天" description="专业团队服务"></el-step>
        <el-step title="精修成片" description="挑选满意照片"></el-step>
      </el-steps>
    </div>

    <!-- 样片预览弹窗 -->
    <el-dialog
      v-model="previewVisible"
      width="80%"
      :show-close="true"
      destroy-on-close
      class="preview-dialog"
    >
      <div class="preview-content">
        <el-carousel height="70vh" arrow="always" indicator-position="outside">
          <el-carousel-item v-for="(photo, index) in currentSample?.photos" :key="index">
            <img :src="photo" class="preview-image" />
          </el-carousel-item>
        </el-carousel>
        <div class="preview-info">
          <div class="title-section">
            <h2>{{ currentSample?.title }}</h2>
            <div class="tags-container" v-if="currentSample?.tags?.length">
              <el-tag v-for="tag in currentSample?.tags" :key="tag" size="small" class="tag-item">
                {{ tag }}
              </el-tag>
            </div>
          </div>
          <p>{{ currentSample?.description }}</p>
          <div class="preview-meta">
            <span>摄影师：{{ currentSample?.photographer.nickname }}</span>
            <span>拍摄时间：{{ currentSample?.shooting_date }}</span>
            <el-button type="primary" size="small" @click="handleLike" :loading="likeLoading">
              <el-icon><Star /></el-icon>
              {{ currentSample?.is_liked ? '已点赞' : '点赞' }} {{ currentSample?.likes }}
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Star } from '@element-plus/icons-vue'
import { getHomeData } from '@/api/home'
import { likeSample, unlikeSample } from '@/api/sample'
import type { Banner } from '@/types/banner'
import type { Sample } from '@/types/sample'
import type { Photographer } from '@/types/photographer'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()
const isLoggedIn = computed(() => userStore.isLoggedIn)

const bannerHeight = '600px'
const banners = ref<Banner[]>([])
const samples = ref<Sample[]>([])
const photographers = ref<Photographer[]>([])

// 预览相关
const previewVisible = ref(false)
const currentSample = ref<Sample>()
const likeLoading = ref(false)

// 获取摄影师等级
const getLevel = (level: number) => {
  const labels: Record<number, string> = {
    1: '初级摄影师',
    2: '高级摄影师',
    3: '资深摄影师',
    4: '首席摄影师',
  }
  return labels[level]
}

// 获取首页数据
const fetchData = async () => {
  try {
    const { data } = await getHomeData()
    banners.value = data.data.banners
    samples.value = data.data.samples
    photographers.value = data.data.photographers
  } catch (error) {
    ElMessage.error('获取数据失败')
  }
}

// 预览样片
const handlePreviewSample = (sample: Sample) => {
  currentSample.value = sample
  previewVisible.value = true
}

// 查看摄影师作品集
const handleViewPortfolio = (photographer: Photographer) => {
  router.push(`/portfolio/${photographer.id}`)
}

// 点赞/取消点赞
const handleLike = async () => {
  if (!currentSample.value) return
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录')
    return
  }

  likeLoading.value = true
  try {
    if (currentSample.value.is_liked) {
      await unlikeSample(currentSample.value.id)
      currentSample.value.likes--
      currentSample.value.is_liked = false
      // 更新列表中的数据
      const item = samples.value.find((i) => i.id === currentSample.value?.id)
      if (item) {
        item.likes--
        item.is_liked = false
      }
      ElMessage.success('已取消点赞')
    } else {
      await likeSample(currentSample.value.id)
      currentSample.value.likes++
      currentSample.value.is_liked = true
      // 更新列表中的数据
      const item = samples.value.find((i) => i.id === currentSample.value?.id)
      if (item) {
        item.likes++
        item.is_liked = true
      }
      ElMessage.success('点赞成功')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  } finally {
    likeLoading.value = false
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.home-container {
  min-height: calc(100vh - 120px);
}

.banner-image {
  width: 100%;
  height: 100%;
}

.section {
  max-width: 1400px;
  margin: 40px auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 28px;
  color: #333;
}

/* 样片样式 */
.samples-grid {
  margin: 20px 0;
}

.sample-item {
  margin-bottom: 20px;
  cursor: pointer;
}

.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 75%;
  overflow: hidden;
  border-radius: 8px;
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.sample-item:hover img {
  transform: scale(1.05);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sample-item:hover .overlay {
  opacity: 1;
}

.overlay h3 {
  margin: 0;
  font-size: 18px;
}

.overlay p {
  margin: 10px 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

/* 摄影师样式 */
.photographers-grid {
  margin: 20px 0;
}

.photographer-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.photographer-card:hover {
  transform: translateY(-5px);
}

.info-content {
  flex: 1;
}

.info-content h3 {
  margin: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.level-tag {
  display: inline-block;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: normal;
}

.level-1 {
  background-color: #e1f3d8;
  color: #67c23a;
}

.level-2 {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.level-3 {
  background-color: #f0f9ff;
  color: #409eff;
}

.level-4 {
  background-color: #fef0f0;
  color: #f56c6c;
}

.introduction {
  margin: 10px 0;
  color: #666;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.stats {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 14px;
}

/* 预览弹窗样式 */
.preview-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.preview-content {
  text-align: center;
  padding: 20px;
}

.preview-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.preview-info {
  margin-top: 20px;
  text-align: left;
}

.preview-meta {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.title-section h2 {
  margin: 0;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  margin: 0;
}

.photographer-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}

.photographer-info {
  text-align: center;
  margin-top: 15px;
}

.photographer-info h3 {
  margin: 10px 0;
  font-size: 18px;
}

.photographer-info p {
  color: #666;
  font-size: 14px;
}

.shooting-steps {
  max-width: 800px;
  margin: 40px auto;
}
</style>
